import React, { FC, useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import { useRequest } from "ahooks";
import styles from "./QuestionCard.module.scss";
import { Button, Space, Tag, Popconfirm, Modal, message } from "antd";
import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  CopyOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons";
import { updateQuestion, copyQuestion } from "../services/question";

type PropsType = {
  // id
  _id: string;
  // 标题
  title: string;
  // 是否发布
  isPublished: boolean;
  // 是否星标
  isStar: boolean;
  // 问卷数量
  answerCount: number;
  // 填写日期
  creatdAt: string;
};

const { confirm } = Modal;
const QuestionCard: FC<PropsType> = (props: PropsType) => {
  const nav = useNavigate();
  const { _id, title, isPublished, isStar, answerCount, creatdAt } = props;

  // 修改标星
  const [isStarState, setIsStarState] = useState(isStar);
  async function fn() {
    await updateQuestion(_id, { isStar: !isStarState });
  }
  const { loading: starLoading, run: changeStar } = useRequest(fn, {
    manual: true,
    onSuccess: () => {
      setIsStarState(!isStarState);
      message.success("已标星");
    },
  });

  // 复制
  // const dubplice = () => {
  //   message.success("复制成功");
  // };
  const { loading: copyLoading, run: dubplice } = useRequest(
    // async function () {
    //   const data = await copyQuestion(_id);
    //   return data;
    // },
    async () => await copyQuestion(_id), // 使用箭头函数简写
    {
      manual: true,
      onSuccess: (res: any) => {
        message.success("复制成功");
        // 复制成功后跳转
        nav(`/question/edit/${res.id}`);
      },
    }
  );

  // 删除
  const del = () => {
    confirm({
      title: "确认删除吗?",
      okText: "确认",
      cancelText: "取消",
      onOk: handleDelete,
    });
  };
  const [isDeletedState, setIsDeletedState] = useState(false);
  async function fnDelete() {
    await updateQuestion(_id, { isDeleted: true });
  }
  const { loading: delLoading, run: handleDelete } = useRequest(fnDelete, {
    manual: true,
    onSuccess: () => {
      setIsDeletedState(true);
      message.success("删除成功");
    },
  });
  // 删除的问卷,就不渲染
  if (isDeletedState) return null;
  // 否则执行下面片段，渲染一个卡片
  return (
    <div className={styles.card}>
      {/* 上部分 */}
      <div className={styles.header}>
        <div className={styles.left}>
          <Link
            to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}
          >
            <Space>
              {isStarState && "🌟"}
              {title}
            </Space>
          </Link>
        </div>
        <div className={styles.right}>
          <Space>
            <div>
              {isPublished ? (
                <Tag color="green">已发布</Tag>
              ) : (
                <Tag>未发布</Tag>
              )}
            </div>
            &nbsp;
            <div>答卷数量：{answerCount}</div>
            &nbsp;
            <div>答卷日期：{creatdAt}</div>
          </Space>
        </div>
      </div>
      {/* 按钮部分 */}
      <div className={styles.bottom}>
        <div>
          <Button
            type="text"
            icon={<EditOutlined />}
            onClick={() => nav(`/question/edit/${_id}`)}
          >
            编辑问卷
          </Button>
          <Button
            type="text"
            icon={<LineChartOutlined />}
            onClick={() => nav(`/question/stat/${_id}`)}
            disabled={!isPublished}
          >
            数据统计
          </Button>
        </div>
        <div className={styles.right}>
          <Button
            icon={<StarOutlined />}
            color={isStar ? "red" : "primary"}
            variant="dashed"
            onClick={() => changeStar()}
            disabled={starLoading}
          >
            {isStarState ? "取消星标" : "标星"}
          </Button>
          <Popconfirm
            title="是否复制该问卷?"
            okText="Yes"
            cancelText="No"
            onConfirm={dubplice}
          >
            <Button type="text" icon={<CopyOutlined />} disabled={copyLoading}>
              复制
            </Button>
          </Popconfirm>
          <Button
            type="text"
            icon={<CloseCircleOutlined />}
            onClick={del}
            disabled={delLoading}
          >
            删除
          </Button>
        </div>
      </div>
    </div>
  );
};

export default QuestionCard;
